<template>
  <div id="energy"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        var ratioY = window.innerHeight / 880;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表
    setEcharts() {
      this.myChart = this.$echarts.init(document.getElementById("energy"));

      let option = {
        legend: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 40,
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#000000",
          textStyle: {
            fontSize: 55, // 字体大小
            color: "#fff",
          },
        },
        grid: {
          top: "10%",
          left: "8%",
          bottom: "10%",
          right: "10%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "单位: 月",
            nameTextStyle: {
              color: "#fff",
              fontSize: 40,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            splitArea: {
              // show: true,
              color: "#fff",
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 38,
              },
              margin: 30,
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
            ],
          },
        ],

        yAxis: [
          {
            type: "value",
            // name: "单位: kWh",
            nameGap: 30,
            nameTextStyle: {
              color: "#fff",
              fontSize: 40,
            },
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              margin: 20,
              textStyle: {
                color: "#fff",
                fontSize: 40,
              },
            },
            axisTick: {
              show: false,
            },
          },
          // {
          //   type: "value",
          //   name: "单位: 吨",
          //   nameGap: 30,
          //   nameTextStyle: {
          //     color: "#fff",
          //     fontSize: 40,
          //   },
          //   min: 0,
          //   // max: 140,
          //   splitNumber: 4,
          //   splitLine: {
          //     show: true,
          //     lineStyle: {
          //       color: "rgba(255,255,255,0.1)",
          //     },
          //   },
          //   axisLine: {
          //     show: true,
          //     lineStyle: {
          //       color: "#fff",
          //     },
          //   },
          //   axisLabel: {
          //     show: true,
          //     margin: 20,
          //     textStyle: {
          //       color: "#fff",
          //       fontSize: 40,
          //     },
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          // }
        ],
        series: [
          {
            name: "水",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#6c50f3",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#6c50f3",
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(108,80,243,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(108,80,243,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(108,80,243, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02],
          },
          {
            name: "电",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#00ca95",
                fontSize: 40,
                fontWeight: "bold",
              },
            },

            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,202,149,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,202,149,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
          },
          {
            name: "气",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#6c50f3",
                color: "rgba(25,185,203,1)",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "rgba(25,185,203,1)",
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            itemStyle: {
              color: "#6c50f3",
              color: "rgba(25,185,203,1)",

              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(25,185,203,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(25,185,203,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(25,185,203, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [168, 225, 214, 321, 398, 213],
          },
          {
            name: "冷量",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#00ca95",
                color: "rgba(223,79,131,1)",

                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                fontSize: 40,
                fontWeight: "bold",
                color: "rgba(223,79,131,1)",
              },
            },

            itemStyle: {
              color: "#00ca95",
              color: "rgba(223,79,131,1)",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(223,79,131,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(223,79,131,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(223,79,131, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [181, 345, 143, 531, 134, 542],
          },
          {
            name: "热量",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 25,
            lineStyle: {
              normal: {
                color: "#6c50f3",
                color: "rgba(239,90,0,1)",

                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                fontSize: 40,
                fontWeight: "bold",
                color: "rgba(239,90,0,1)",
              },
            },
            itemStyle: {
              color: "#6c50f3",
              color: "rgba(239,90,0,1)",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            // tooltip: {
            //   show: false,
            // },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(239,90,0,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(239,90,0,0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(239,90,0, 0.9)",
                shadowBlur: 20,
              },
            },
            data: [222, 176, 332, 137, 391, 276],
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioY = window.innerHeight / 880;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>
<style scoped lang="less">
#energy {
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
  // background: rgba(0, 0, 0, 0.6);
  // background: url(../../assets/方框底图.png) 0 0 no-repeat;
  // background-size:100% 100%;
}
</style>
